<template>
    <div ref="dragTool" class="drag-tool" @click.stop="active" :class="{active: state.active === id}" @dblclick.native="$emit('binding')">
        <div class="drag-mask" v-if="mask"></div>
        <div class="drag-l">
            <div class="drag-btn _fc-drag-btn" style="cursor: move;">
                <i class="jd-icon icon-drag"></i>
            </div>
        </div>
        <div class="drag-r">
            <div class="drag-btn drag-btn-tips" v-if="state.active === id && dragId.mask==null && !dragId.mask">
                <el-dropdown>
                    <span style="color: #FFF;padding-top: 4px;">
                        <i class="jd-icon" :class="dragIcon"></i> {{ dragLable }}
                        <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <div class="drag-typeBox">
                            <div class="drag-type" v-for="(item,index) in converts" :key="index" @click="convert(item)">
                                <i class="jd-icon" :class="item.icon"></i> {{ item.label }}
                            </div>
                        </div>
                    </template>
                </el-dropdown>
            </div>
            <!-- <div class="drag-btn" @click="$emit('create')">
                <i class="fc-icon icon-add"></i>
            </div> -->
            <div class="drag-btn" @click="$emit('copy')">
                <i class="jd-icon icon-copy"></i>
            </div>
            <div class="drag-btn" v-if="children" @click="$emit('addChild')">
                <i class="jd-icon icon-add-child"></i>
            </div>
            <div class="drag-btn drag-btn-danger" @click="$emit('delete')">
                <i class="jd-icon icon-delete"></i>
            </div>
        </div>
        <div class="drag-model" :class="rule.isBind?'active':''" v-if="canBind" @click="$emit('binding')">
            <i class="jd-icon icon-data-bind" >
                <span v-if="rule.isBind">已绑定[{{ rule.field }}]</span>
                <span v-else>未绑定</span>
            </i>
        </div>
        <slot name="default"></slot>
    </div>
</template>

<script>
import {computed, inject, toRefs, defineComponent} from 'vue';

let uni = 1;
export default defineComponent({
    name: 'DragTool',
    props: ['rule', 'dragId', 'dragBtn', 'children', 'unique', 'mask', 'converts'],
    setup(props) {
        const {unique} = toRefs(props);
        const id = computed(() => unique.value || uni++);
        const state = inject('fcx');
        return {
            id,
            state
        };
    },
    data() {
        return {
            dragLable: this.dragId.label,
            dragIcon: this.dragId.icon,
            canBind: false
        }
    },
    mounted(){
        this.allowBind();
    },
    methods: {
        active() {
            if (this.state.active === this.id) return;
            this.state.active = this.id;
            this.$emit('active');
        },
        convert(newItem){
            this.dragLable = newItem.label;
            this.dragIcon = newItem.icon;
            this.$emit('convert', newItem);
        },
        allowBind(){
            var dragName = this.dragId.name;
            var componentName = this.converts[dragName];
            if (componentName!=null){
                this.canBind = true;
            }
        },
    },
    beforeDestroy() {
        this.state = {};
    }
});
</script>

<style lang="scss">
.drag-tool {
    position: relative;
    min-height: 20px;
    box-sizing: border-box;
    padding: 8px;
    outline: 1px dashed #9e9d9d;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    cursor: pointer;
}

.drag-model{
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1904;
    color:#FFF;
    background: #f74949;
    padding: 3px 5px;

    span{
        margin-left: 5px;
        font-size: 14px;
    }
}
.drag-model:hover{
    background: #ff0000;
}
.drag-model.active {
    background: #939394;
}
.drag-model.active:hover{
    background: #73767a;
}

.drag-tool .drag-tool {
    margin: 0px;
}

.drag-tool + .drag-tool {
    margin-top: 0px;
}

.drag-tool:hover {
    outline: 1px dashed #2E73FF;
}

.drag-tool:hover > div > .drag-btn {
    display: flex;
}

.drag-tool.active {
    outline: 1px solid #2E73FF;
}

.drag-tool.active > div > .drag-btn {
    display: flex;
}

.drag-tool .drag-btn {
    display: none;
}

.drag-r {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1904;
}

.drag-l {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1904
}

.drag-btn {
    height: 25px;
    width: 25px;
    color: #fff;
    background-color: #2E73FF;
    text-align: center;
    line-height: 25px;
    padding-bottom: 1px;
    float: left;
    cursor: pointer;
    justify-content: center;
}

.drag-btn + .drag-btn {
    margin-left: 0px;
}

.drag-btn-tips {
    height: 25px;
    line-height: 25px;
    color: #FFF;
    background-color: #73767a;
    width: auto;
    justify-content: left;
    padding: 0px 8px;
}

.drag-btn-danger {
    width: 25px;
    margin: 0px auto;
    height: 25px;
    line-height: 25px;
    padding: 0px 10px;
    background-color: #ff0000;
}

.drag-btn i {
    font-size: 13px;
}

.drag-mask {
    z-index: 1900;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.drag-typeBox{
    padding: 10px;
    width: 570px;
    border-radius: 8px;
    float: left;
}

.drag-type{
    width: 110px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0px 5px;
    cursor: pointer;
    float: left;
}
.drag-type:hover {
    color: #FFF;
    background: #2E73FF;
}
</style>
